<template>
  <div
    class="study-question correct-question"
    :class="
      wordData.questionType == 1 ||
      wordData.questionType == 2 ||
      wordData.questionType == 3
        ? 'center-correct'
        : ''
    "
  >
    <div class="correct-title">
      <span class="word-name mr20 click" @click="playAudio">
        {{ wordData.wordName }}
      </span>
      <span class="word-phonetic" v-if="wordData.phonetic">
        [{{ wordData.phonetic }}]
      </span>
      <div class="word-img click ml20">
        <AudioPlay
          ref="audioPlay"
          :type="1"
          :audioSrc="baseURL + wordData.audioURL"
        ></AudioPlay>
      </div>
    </div>
    <div
      class="correct-contain"
      v-if="
        wordData.questionType == 1 ||
        wordData.questionType == 2 ||
        wordData.questionType == 3
      "
    >
      <div class="click-bg" v-if="!isChecked" @click="clickParaphrase">
        点击查看释义
      </div>
      <div v-else class="paraphrase" @click="playAudio">
        {{ wordData.paraphrase }}
      </div>
    </div>
    <div v-if="wordData.questionType == 4 || wordData.questionType == 5">
      <div class="word-box">
        <div class="input-word">
          <div v-if="!isChecked">
            <el-input
              @paste.native.capture.prevent="$handlePaste"
              ref="wordInput"
              v-model="inputWord"
              placeholder=""
            >
              <!--  @input="checkWord" -->
            </el-input>
          </div>

          <div v-if="isChecked" class="wordInput">
            <span
              class="el-input__inner"
              :class="isChecked && !inputCheckAnswer ? 'input-false' : ''"
              >{{ inputWord }}</span
            >
            <img
              v-if="isChecked && inputCheckAnswer"
              src="@/assets/img/true-b.png"
              alt=""
            />
            <img
              v-if="isChecked && !inputCheckAnswer"
              src="@/assets/img/false-b.png"
              alt=""
            />
          </div>
          <p class="word-par">{{ wordData.paraphrase }}</p>
        </div>
      </div>
      <!-- <AudioPlay
        ref="audioPlay"
        :type="1"
        :audioSrc="baseURL + wordData.audioURL"
      ></AudioPlay> -->
    </div>
    <!-- <audio ref="audio" :src="baseURL + wordData.audioURL"></audio> -->
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay";
export default {
  data() {
    return {
      inputWord: "",
      isFirstCheck: true,
      inputCheckAnswer: null,
      isChecked: false,
    };
  },
  components: {
    AudioPlay,
  },
  methods: {
    clickParaphrase() {
      this.isChecked = true;
      this.playAudio();
    },
    playAudio() {
      if (this.$refs.audioPlay) {
        this.$refs.audioPlay.playAudio();
      }
    },
    // 输入校验答案
    checkWord() {
      if (this.isFirstCheck) {
        return;
      }
      if (this.isChecked) {
        this.emptyInput();
      }
      let res = this.checkInputWord();
      if (!res) {
        this.checkedInputWord();
      }
    },
    focusWordInput() {
      if (this.$refs.wordInput) {
        this.$refs.wordInput.focus();
      }
    },
    // 校验现有输入内容是否正确
    checkInputWord() {
      let result = true;
      let trueAnswer = this.wordData.wordName.trim().split("");
      let stuAnswer = this.inputWord.trim().split("");
      if (stuAnswer.length > trueAnswer.length) {
        result = false;
      } else {
        stuAnswer.forEach((item, index) => {
          if (item != trueAnswer[index]) {
            result = false;
          }
        });
      }
      return result;
    },
    // 校验输入框答案，返回匹配结果
    matchingChar() {
      let trueAnswer = this.wordData.wordName.trim().split("");
      let stuAnswer = this.inputWord
        .trim()
        .split("")
        .map((item) => {
          return {
            str: item,
            isTrue: null,
          };
        });
      stuAnswer.forEach((item, index) => {
        if (item.str != trueAnswer[index]) {
          item.isTrue = false;
        } else {
          item.isTrue = true;
        }
      });
      return stuAnswer;
    },
    matchingCompleteChar() {
      return this.wordData.wordName.trim() == this.inputWord.trim();
    },
    // 校验单词操作
    checkedInputWord() {
      let res = this.matchingCompleteChar();
      this.isChecked = true;
      this.inputCheckAnswer = res;
      if (!res) {
        this.playAudio();
      }
    },
    // 清空输入框
    emptyInput() {
      this.inputWord = "";
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
    // 监听回车
    watchKeyUp(e) {
      if (e.keyCode == 13) {
        // isFirstCheck
        if (!this.inputWord) {
          //没有输入单词提示请输入单词
          console.log("输入单词");
          return;
        }
        if (this.inputWord && !this.isChecked) {
          //校验输入单词
          if (this.isFirstCheck) {
            this.isFirstCheck = false;
          }
          //
          this.checkedInputWord();
          return;
        }
        if (this.inputWord && this.isChecked && this.inputCheckAnswer) {
          //校验结果正确，下一题
          this.$emit("nextWord");

          return;
        }
        if (this.inputWord && this.isChecked && !this.inputCheckAnswer) {
          //校验结果错误，清空输入框
          this.emptyInput();
          return;
        }
      }
    },
    initCompon() {
      this.inputWord = "";
      this.isFirstCheck = true;
      this.inputCheckAnswer = null;
      this.isChecked = false;
      this.$nextTick(() => {
        this.focusWordInput();
      });
    },
  },
  mounted() {
    window.addEventListener("keyup", this.watchKeyUp);
    this.focusWordInput();
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.watchKeyUp);
  },

  props: {
    wordData: {
      type: Object,
    },
  },
  watch: {
    wordData() {
      this.initCompon();
    },
  },
};
</script>